前情提要:
本次搭建环境:本章图片30张,请注意你的流量
之前我在简书写过RN环境搭建的教程
简书:TrustTheBoy
教程地址:http://www.jianshu.com/p/8f9662dbaa99
以下工具可以问我要操作系统:windows 10 64位
版本号:1607
OS 内部版本 14393.321
React Native版本:0.35
以下工具可以问我要
以下工具可以问我要 需要准备:(以下工具可以问我要)
科学上网工具(重要),过程中保持开启1.JDK1.8:版本不强求,最好都用最新的吧,1.7也可以
2.SDK:用于测试安卓应用的万能模拟器
3.Node:node.js是轻量级的Web服务器,React Native跑起来需要安装node
4.Git:安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端
5.VirtualBox:免费虚拟机软件,具有丰富的特色,而且性能也很优异!简单易用
6.Genymotion:最棒模拟体验
作为开发者,如果不会科学上网,那真的说不过去,不会翻墙,甚至你连下载开发工具都很难,所以无论如何你都该拥有科学上网的能力
进入正题
👉第一步:安装JDK(本人安装的是最新版本JDK1.8),并配置变量环境
JDK的位置
例如:(JAVA_HOME=> D:\java)
设置环境变量PATH:
例如:(PATH=> %JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;)
配置完成按 win+r
键,打开 运行
输入 cmd
,键入命令 javac
或 java
检测是否安装成功
图11111111111111111111111
👉第二步:安装SDK
(1)首先设置SDK环境变量,
Android SDK Manager的位置
例如:(ANDROID_HOME=> D:\android-sdk-windows)
设置环境变量PATH:
例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)
配置完成按
win+r
键
打开运行
输入cmd
键入命令android
检测是否安装成功
(2)然后双击打开SDK Manager.exe
(3)使用国内镜像地址下载
如果你没有使用科学上网工具
那么请访问http://www.androiddevtools.cn/
查看切换镜像地址以及设置方法
(4)设置完成之后点击菜单Packages–>Reload
(5)然后选择图中所勾选文件,点击右下方Install packages
(6)接着点击Accept License,然后点击Install进行下载
由于文件需要很久才能下载下来,所以可以进行第三步了,
但是不要关闭Android SDK窗口
👉第三步:安装Node,访问https://nodejs.org/en/
node.js是轻量级的Web服务器,React Native跑起来需要安装node
安装完成之后:
按
win+r
键
打开运行
输入cmd
键入node -v的命令来测试NodeJS是否安装成功
👉第四步:安装Git
安装React-native需要用到git,
如果没有配置git
需要先下载对应的客户端,
访问:
https://git-for-windows.github.io
安装时这里记得选择第二个
👉第五步:安装react-native命令行工具
先创建文件名,(名字可以自定义)
按住Shift键,鼠标右键点击在此打开命令窗口
输入
git clone https://github.com/facebook/react-native.git
(过程比较久,看网速啦)
克隆成功
然后进入目录下的react-native目录下的react-native-cli目录,输入:
npm install -g
回车
完成
👉第六步:创建React Native项目
📍到这里的时候请查看SDK下载完没,
📍下载完成请检查是否勾选的都有下载
📍如果没有问题,请继续
(1).进入你要要存放项目的盘符,执行react-native init (项目名)—>这里时间很长,耐心等待
OK
👉第七步:开启React Native服务,键入命令:(需要等待一段时间)
react-native start
用浏览器访问:
http://localhost:8081/index.android.bundle?platform=android
看看是否可以看到打包后的脚本
看到很长的js代码就对了
第一次访问通常需要十几秒
并且在packager的命令行可以看到进度。
以下不是必须,如果有真机直接用真机也行
👉第八步:安装VirtualBox
👉第九步:Genymotion
1.配置Genymotion
打开Genymotion
点击菜单栏Setting—>ADB,
选择use custom Android SDK tools
点击Browse,选择前面SDK安装目录
在Genymotion下载需要翻墙,可以百度ova格式镜像
ova镜像我可以问我要~,以下是自己下载步骤
#
在软件中下载的请进入Genymotion官网,注册一个账号,
https://www.genymotion.com/account/create/
点击Create an Account,跳转代表创建成功,如果没有动作,请上拉至顶部,看看是否有黄色警示框,
(由于我的笔记本屏幕小,当初就在这里浪费了点时间,结果人家的提示框在上面😭😭😭)
注册成功后,回到Genymotion进行登录,点击Setting–>Account,点击Sign in,登录你的账号
下载Android镜像
点击菜单栏ADD,选择系统型号,下一步
完成之后可以根据个人需求进行设置:
设置完后双击,开启虚拟机/或者点Start
👉第十步:运行package,在命令行中进入项目目录,输入:
react-native start
然后相应的目录新开启命令窗口输入:
react-native run-android
等待一段时间(科学上网工具请准备好):
说明:键入react-native run-android后会看见”.”增加,
这里其实是在下载:
gradle-2.4-all.zip (就是这个文件)
此文件可以问我要,可以不解压||解压
放到:
C:\Users\用户名\.gradle\wrapper\dists\gradle-2.4-all\6r4uqcc6ovnq6ac6s0txzcpc0\
接着重新执行命令即可
以下是自己翻墙下载时的截图,时间紧迫的可以找我要文件,跳过这里
第一次会很慢,因为需要下载些文件
如果执行过程中报错:
error:failed to find Build Tools revision 23.0.1
请检查SDK下载文件是否都已下载完成
如果报错:
再次执行命令react-native run-android
切出你的安卓模拟器,看见Welcome….代表你成功了